<template>
    <div>
        <div id="myMap" class="map-box">
            <div class="suspension">
                <div class="title">图例</div>
                <div class="list">
                    <ul>
                        <li class="li" v-for="(item, index) in list" :key="index" @click="handleClick(index, $event)">
                            <label class="checkbox">
                                <span class="checkbox-input">
                                    <span class="checkbox-inper" :class="[item.isClicked ? 'is-clicked' : '']"></span>
                                    <!-- <input type="checkbox" aria-hidden="false" class="checkbox-ori"> -->
                                </span>
                                <span class="checkbox-lable" :class="[item.isClicked ? 'is-clicked-text' : '']">
                                    {{ item.name }}
                                </span>
                            </label>
                        </li>
                    </ul>
                </div>
            </div>
            <div ref="tc" class="tc-f">我是弹窗222222222222222222</div>
        </div>
    </div>
</template>

<script>
import { akProxy } from "@/utils/ak";
import Provider from "@/utils/chinatmsproviders";
import L from "leaflet";
// import {
//   POS_JYDS,
// } from "@/utils";
export default {
    name: "PreLeaflet",
    data() {
        return {
            map: null,
            maskArea: null, // 保存图形
            list: [
                {
                    name: "地块轮廓",
                    isClicked: false,
                    value: "",
                },
                {
                    name: "地块名称",
                    isClicked: false,
                    value: "",
                },
                {
                    name: "产品图标",
                    isClicked: false,
                    value: "",
                },
                {
                    name: "设备图标",
                    isClicked: false,
                    value: "",
                },
            ],
            positionAJ: [
                [45.763945225459906, 126.5919452905655],
                [45.76447671876591, 126.59227788448335],
                [45.76437566056943, 126.59249782562257],
                [45.76389282443723, 126.5920847654342],
            ],
            polygons: [],
        };
    },
    mounted() {
        Provider(L);
        this.getMap();
    },
    methods: {
        handleClick(index, event) {
            event.stopPropagation();
            this.list[index].isClicked = !this.list[index].isClicked;
            if (this.list[index].isClicked) {
                this.produceMap();
            } else {
                this.destroyMap();
            }
        },
        getMap() {
            // let positionAJ = this.positionAJ
            let myCenter = new L.LatLng(45.763968, 126.591629); // 设置地图中心
            let map = L.map("myMap", {
                center: myCenter,
                zoom: 18,
                doubleClickZoom: false,
            });
            this.map = map;
            L.tileLayer
                .chinaProvider("TianDiTu.Satellite.Map", { maxZoom: 18, minZoom: 5, key: akProxy.ak })
                .addTo(map);
            L.tileLayer
                .chinaProvider("TianDiTu.Satellite.Annotion", { maxZoom: 18, minZoom: 5, key: akProxy.ak })
                .addTo(map);
            // this.drawBoundary()
            // })
        },

        produceMap() {
            let map = this.map;
            let positionAJ = this.positionAJ;
            let polygon = new L.Polygon(positionAJ);
            polygon.addTo(map);
            map.addLayer(polygon);
            this.polygons.push(polygon);
            polygon.on("click", ({ latlng: { lat, lng } = {} }) => {
                var popup = L.popup();
                popup.setLatLng({ lat, lng }).setContent(this.$refs.tc).openOn(map);
            });
        },

        destroyMap() {
            let map = this.map;
            this.polygons.forEach((item) => {
                map.removeLayer(item);
            });
        },
        drawBoundary() {
            let map = this.map;
            let coordArr = this.positionAJ;
            let mapNW = map.getBounds().getNorthWest();
            let mapNE = map.getBounds().getNorthEast();
            let mapSE = map.getBounds().getSouthEast();
            let mapSW = map.getBounds().getSouthWest();

            // 添加到闭合图形中
            let maskArr = [];
            maskArr.push(mapNW);
            maskArr.push(mapSW);
            maskArr.push(mapSE);
            maskArr.push(mapNE);
            maskArr.push(mapNW); // 设置为闭合区域的起点

            // 添加各闭合点
            coordArr.map((res) => {
                let points = [];
                res.map((subRes) => {
                    console.log(subRes);
                    // subRes.map(item => {
                    // points.push({ lat: subRes[1], lng: subRes[0] });
                    // });
                });

                //将闭合区域加到遮罩层上，每次添加完后要再加一次西北角作为下次添加的起点和最后一次的终点
                maskArr = maskArr.concat(points);
                maskArr.push(maskArr[0]);
            });
            if (this.maskArea) {
                this.maskArea.remove(map);
                this.maskArea = null;
            }
            // 添加遮罩
            let maskArea = L.polygon(maskArr, {
                color: "transparent", // 边界颜色
                fillColor: "#B7D2EA", // 填充色
                fillOpacity: 0.8, // 填充透明度
            });
            maskArea.addTo(map);
            this.maskArea = maskArea;
        },
    },
};
</script>

<style scoped>
#myMap {
    height: 70vh;
}

.suspension {
    position: absolute;
    right: 20px;
    bottom: 20px;
    z-index: 999;
    background-color: rgba(35, 57, 61, 0.8);
    cursor: pointer;
    padding: 10px 15px;
}

.select {
    color: #0c8;
}

.checkbox {
    font-weight: 500;
    font-size: 14px;
    position: relative;
    cursor: pointer;
    display: inline-block;
    white-space: nowrap;
    user-select: none;
}

.checkbox-input {
    white-space: nowrap;
    cursor: pointer;
    outline: none;
    display: inline-block;
    line-height: 1;
    position: relative;
    vertical-align: middle;
}

.checkbox-inper {
    display: inline-block;
    position: relative;
    border: 1px solid #dcdfe6;
    border-radius: 2px;
    box-sizing: border-box;
    width: 14px;
    height: 14px;
    background-color: #fff;
    z-index: 1;
    transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46),
        background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46);
}

.checkbox-inper::after {
    box-sizing: content-box;
    content: "";
    border: 1px solid #fff;
    border-left: 0;
    border-top: 0;
    height: 7px;
    left: 4px;
    position: absolute;
    top: 1px;
    transform: rotate(45deg) scaleY(0);
    width: 3px;
    transition: transform 0.15s ease-in 0.05s;
    transform-origin: center;
}

.is-clicked {
    background-color: #0c8;
    border-color: #0c8;
}

.is-clicked::after {
    transform: rotate(45deg) scaleY(1);
}

.is-clicked-text {
    color: #0c8;
}

.title {
    font-size: 15px;
    color: #fff;
    margin-bottom: 6px;
}

.li {
    margin-top: 4px;
    color: #fff;
    list-style: none;
}

.checkbox-ori {
    opacity: 0;
    outline: none;
    position: absolute;
    margin: 0;
    width: 0;
    height: 0;
    z-index: -1;
}

.checkbox-lable {
    display: inline-block;
    padding-left: 10px;
    line-height: 19px;
    font-size: 14px;
}

.tc-f {
    width: 200px;
    height: 200px;
    background-color: #0a2832;
}
</style>
